@CHARSET "UTF-8";
body { font: 1em / 150% Arial, Helvetica, sans-serif; }
a { color: #669; text-decoration: none; }
a:hover { text-decoration: none; }
h1 { font: bold 36px / 100% Arial, Helvetica, sans-serif; }
li { list-style: none; }
h3 { color: white; padding: 5px; margin: 0; }

/************************************************************************************
/************************************************************************************
 STRUCTURE
 *************************************************************************************
 *************************************************************************************/

#pagewrap { padding: 5px; width: 960px; margin: 20px auto; }
#header { }
#content { width: 640px; float: left; padding: 5px; }
#sidebar { width: 300px; float: right; }
#footer { clear: both; }
#mask {	
	width: 100%;
	height: 100%;
	margin: -100%;
	padding: 100%;
	position: absolute;
	/* Fallback for web browsers that doesn't support RGBa */ 
	background: rgb(0, 0, 0);
	/* RGBa with 0.6 opacity */ 
	background: rgba(0, 0, 0, 0.6); 
}

/** Layout CSS Gradient **/
.layout-css-gradient {
	background: #959595; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url();
	background: -moz-linear-gradient(top,  #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-8 */
}

/* border & guideline (you can ignore these) */
#header, #content, #sidebar { margin-bottom: 5px; }
#pagewrap, #header, #content, #sidebar, #footer { border: solid 1px #ccc; }

/************************************************************************************
 HEADER
 *************************************************************************************/

/** Header Login **/
.header-form-login { width: 350px; margin-left: 64%; display: block; }

/************************************************************************************
 CONTENT
 *************************************************************************************/

/** Content Products **/
#content table.products-content { width: 120px; display: inline; margin-right: 20px; padding: 17px; }
#content table.products-content tbody tr td { padding: 5px 0 5px 0; border-radius: 5px; -moz-border-radius: 5px; }
#content table.products-content tbody tr td a { padding-left: 10px; font-size: 14px; color: white; cursor: auto; }
/** Popup Products **/
#popup-product { width: 50%; height: 70%; background: white; margin: -40% 0 0 24%; border-radius: 5px; border: 2px solid black; -moz-border-radius: 5px; }
#popup-product .popup-product-title { }
#popup-product .popup-product-content { width: 100%; height: 93%; }
#popup-product .popup-product-content .popup-product-image { float: left; width: 40%; height: 50%; }
#popup-product .popup-product-content .popup-product-image img { width: 230px; height: 220px; margin: 30px; }
#popup-product .popup-product-content .popup-product-info { float: right; width: 50%; height: 80%; }
#popup-product .popup-product-content .popup-product-actions { float: left; width: 150px; height: 25px; margin: 60px 0 0 60px; border-radius: 5px; -moz-border-radius: 5px; }
#popup-product .popup-product-content .popup-product-actions a {padding: 15px; font-size: 12px; color:white; cursor: auto; }

/************************************************************************************
 SIDEBAR
 *************************************************************************************/
#sidebar ul.sidebar-desktop-list li {
	width: 85%;
	text-align: center;  
	background: #7d7e7d; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url();
	background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-8 */
}
#sidebar ul.sidebar-desktop-list li a { color: white; }

.sublist { 
	width: 85%; 
	display: none; 
	text-align: center; 
	background: rgb(255,255,255); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url();
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-8 */
}
.sublist a { color: black !important; }


/************************************************************************************
/************************************************************************************
 MOBILE
 *************************************************************************************
 *************************************************************************************/

/** Mobile Sidebar **/
.sidebar-mobile-list { display: none; }
.sidebar-mobile-sublist { display: none; }
.sidebar-mobile-sublist li { display: inline; list-style-type: none; padding-right: 20px; }

/** Mobile Login **/
.header-mobile-link-login { display: none; }
.header-mobile-form-login { width: 120px; display: none; margin-left: 54%;}
